<template>
  <view class="waterfall">
    <uv-waterfall
      ref="waterfall"
      v-model="list"
      :add-time="50"
      column-count="2"
      left-gap="15"
      right-gap="15"
      column-gap="16"
      @finish="handleWaterFallFinish"
      @clear="clearCallback"
      @changeList="changeList"
    >
      <!-- 第一列数据 -->
      <template v-slot:list1>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <ListItem
            v-for="(item, index) in list1"
            :key="item.id"
            :item="item || {}"
          ></ListItem>
        </view>
      </template>
      <!-- 第二列数据 -->
      <template v-slot:list2>
        <!-- 为了磨平部分平台的BUG，必须套一层view -->
        <view>
          <ListItem
            v-for="(item, index) in list2"
            :key="item.id"
            :item="item || {}"
          ></ListItem>
        </view>
      </template>
    </uv-waterfall>
    <uv-load-more :status="loadStatus"></uv-load-more>
  </view>
</template>
<script>
import ListItem from "/components/IndexList/item.vue";

import articleManagement from "/api/articleManagement.js";

export default {
  components: {
    ListItem,
  },
  data() {
    return {
      list: [], // 瀑布流全部数据
      list1: [], // 瀑布流第一列数据
      list2: [], // 瀑布流第二列数据
      loadStatus: "loadmore",
      pageHide: false,
    };
  },
  mounted() {
    this.getRandomData();
  },
  onShow() {
    this.pageHide = false;
  },
  onHide() {
    this.pageHide = true;
  },
  // 下拉刷新数据
  onPullDownRefresh() {
    this.list = [];
    this.clear();
    // 清空列数据
    this.list1 = [];
    this.list2 = [];
    uni.showToast({
      icon: "success",
      title: "刷新成功",
    });
    uni.stopPullDownRefresh();
  },
  methods: {
    // 触底加载更多
    onReachBottom() {
      if (this.loadStatus == "loadmore") this.getRandomData();
    },
    // 离开当前页面时，就不处理还未处理的数据
    // e.name在这里返回是list1或list2，要手动将数据追加到相应列
    changeList(e) {
      if (!this.pageHide) this[e.name].push(e.value);
    },
    // 清空数据
    clear() {
      this.$refs.waterfall.clear();
    },
    // 清空数据返回
    clearCallback() {
      this.getRandomData();
    },
    // 获取随机数据
    getRandomData() {
      this.loadStatus = "loading";
      articleManagement.gteArticleListToIndex().then((res) => {
        console.log("list", res);
        this.list.push(...res.data);
      });
    },
    // 瀑布流加载完毕事件
    handleWaterFallFinish() {
      this.loadStatus = "loadmore";
    },
  },
};
</script>
